<template>
    <div :class="cns">
        <ph-button 
        v-stv="isLeaf&&active"
        :class="btnCns" 
        :block="true" 
        :icon="tree.icon" type='transparent' @click="onAction">{{tree.title}}</ph-button>
        <template v-if="!isLeaf">
            <nav class="ph-menu-tree ph-submenu" v-toggle-height="visible">
                <menu-tree :tree="node" v-for="(node,idx1) in tree.children" :key="idx1"/>
            </nav>
        </template>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, provide, Ref, ref, watch } from 'vue'
import { ToggleHeight,PhScrollToView } from '../../directives'
import {PhButton} from '../base'
import {TreeNode} from './struct'
export default defineComponent({
    name:"MenuTree",
    components:{
        PhButton
    },
    directives:{
        ToggleHeight,
        stv:PhScrollToView
    },
    props:{
        isRoot:{type:Boolean,default:false},
        tree:{
            type:Object as PropType<TreeNode>,
            default:()=>Object.create({title:""}) as TreeNode
        },
    },
    setup(props){
        const notify = inject<(a:string,b:Array<unknown>)=>void>('notifyRootMenu')
        const current = inject<Ref<string>>("current");
        const getParentMenu = inject('getParentMenu') as ()=>TreeNode[]
        const expandParent = inject('expandParent') as ()=>void
        const paths = inject("matchedPaths") as Ref<TreeNode[]>
        const visible = ref(paths.value.includes(props.tree))

        const isLeaf = computed(()=>!props.tree.children||props.tree.children.length===0)
        const active = computed(()=>{
            if(isLeaf.value)return current&&current.value==props.tree.action
            else return visible.value
        })
        
        const cns = computed(()=>{
            return {
                'ph-menu-item':true,
                'ph-menu-item-leaf':isLeaf.value,
                'ph-menu-item-active':active.value
            }
        })
        const btnCns = computed(()=>{
            return {
                'ph-icon-arrow':!isLeaf.value,
                'ph-icon-arrow-down':!isLeaf.value&&!visible.value,
                'ph-icon-arrow-up':!isLeaf.value&&visible.value,
                'ph-hover-striped-v':!active.value&&isLeaf.value
            }
        })

        const onAction = ()=>{
            if(isLeaf.value){
                notify&&notify(props.tree.action as string,[...getParentMenu(),props.tree])
            }else{
                visible.value = !visible.value
            }
        }
        if(isLeaf.value){
            watch(()=>active.value,(v)=>{
                if(v)expandParent()
            })
        }
        else{
            provide('getParentMenu',()=>{
                return [...getParentMenu(),props.tree]
            })
            provide('expandParent',()=>{
                visible.value = true
                if(!props.isRoot)
                expandParent&&expandParent()
            })
        }
        return {
                isLeaf,
                cns,
                btnCns,
                visible,
                active,
                onAction,
                }
    }
})
</script>